<!--设备管理-->
<template>
  <div>
    <el-table
      class="table_equipment_manage"
      :data="tableData"
      size="mini"
      border
      v-loading="loading"
      @expand-change="getListChild"
      :row-class-name="tableRowClassName"
      style="width: 100%">
      <el-table-column type="expand" class-name="col_expand" width="30" >
        <template slot-scope="props">
          <el-col :span="24"  class="expand_con">
            <el-table
              :data="props.row.tableData"
              :header-cell-style="{
					          'background': '#f8f8f8 !important',
					        }"
              :cell-style="{
					          'background': '#fff !important',
					        }"
              width="100%">
              <el-table-column label="控制盒序号" prop="outerCode"></el-table-column>
              <el-table-column label="场景" prop="scene.names"></el-table-column>
              <el-table-column label="所在位置" prop="address"></el-table-column>
              <el-table-column label="IP地址" prop="ip"></el-table-column>
              <el-table-column label="状态" prop="state" width="110">
                <template slot-scope="scope">
                  <div class="state state_normal" v-if="scope.row.state==1">使用中</div>
                  <div class="state state_disabled" v-else-if="scope.row.state==2">在库</div>
                  <div class="state state_error" v-else>停用</div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="150">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">参数设置</el-button>
                  <el-button type="text" @click="comSetting(scope.row)" size="small">货物设置</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="40" align="center"></el-table-column>
      <!--<el-table-column label="序号" type="index" width="40"></el-table-column>-->
      <el-table-column label="通讯盒序号" class-name="col_expand_con" prop="outerCode">
      </el-table-column>
      <el-table-column label="所属分组" prop="equipGroup.sgroup"></el-table-column>
      <el-table-column label="所在位置" prop="address"></el-table-column>
      <el-table-column label="IP地址" prop="ip"></el-table-column>
      <el-table-column label="状态" prop="status" width="110">
        <template slot-scope="scope">
          <section class="activate-state" v-if="scope.row.state===1">
            <i></i>
             {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
          <section class="inactive-state" v-else>
            <i></i>
            {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
        </template>
      </el-table-column>
    </el-table>
    <com-cargo-setting ref="comCargoSetting" @refreshDataList="getList"></com-cargo-setting>
    <extend-list ref="extendList" @refreshDataList="getList"></extend-list>
  </div>
</template>

<script>
import {getEquipRegisterList} from '@/api/equipment/management.js'
import extendList from '@/views/modules/equipment/extendList'
import comCargoSetting from '@/views/modules/equipment/comCargoSetting'
export default {
  components: {
    extendList,
    comCargoSetting
  },
  data () {
    return {
      tableData: [],
      loading: false,
      innerCode: ''
    }
  },
  activated () {
    this.getList()
  },
  methods: {
    // 获取列表
    getList () {
      getEquipRegisterList({types: 1}).then(res => {
        console.log(res.data)
        if (res.data.code === '200') {
          this.tableData = res.data.result
          this.tableData.forEach(item => {
            this.$set(item, 'tableData', [])
          })
          this.total = res.data.result.length
        }
      })
    },
    // 参数设置
    handleClick (row) {
      this.$refs.extendList.init(row, 'add')
    },
    // 货物设置
    comSetting (row) {
      // 传入行数据 以及获取到的通讯盒内部编号
      this.$refs.comCargoSetting.init(row, this.innerCode)
    },
    getListChild (row, age) {
      // 获取通讯盒内部编号赋值
      this.innerCode = row.innerCode
      this.$nextTick(() => {
        getEquipRegisterList({types: 2, parentEquipId: row.id}).then(res => {
          console.log(res.data)
          if (res.data.code === '200') {
            row.tableData = res.data.result
            this.total = res.data.result.length
          }
        })
      })
    },
    tableRowClassName ({row, rowIndex}) {
      if (rowIndex % 2 === 0) {
        return 'row_even'
      } else {
        return 'row_uneven'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.state{
  .position: relative;
  padding-left:12px;
  font-size:16px;
  &::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin:auto 0;
    width: 8px;
    height: 8px;
    z-index: 10;
    border-radius: 50%;
  }
}
.state_normal{
  color:#1089FF;
  &::before{
    background: #1089FF;
  }
}
.state_disabled{
  color:#999;
  &::before{
    background: #999;
  }
}
.state_error{
  color:#FF3E3E;
  &::before{
    background: #FF3E3E;
  }
}
</style>
<style lang="scss">
.table_equipment_manage{
  .row_uneven{
    background: #f7f7f7;
  }
  .el-table__expand-icon{
    width: 12px;
    margin-left: 18px;
  }
  th:nth-child(2) .cell,td:nth-child(2) .cell{
    padding: 0 !important;
  }
  .el-table__expanded-cell{
    padding: 0 !important;
    .cell{
      text-align: left !important;
    }
  }
  .expand_con{
    padding:20px 0 20px 90px ;
    .el-table{
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      border-left: 1px solid #ddd;
    }
    .el-table__fixed-right::before, .el-table__fixed::before{
      display: none;
    }
    .el-table::before{
      display: none;
    }
    th{
      height: 36px !important;
      &:first-child .cell{
        padding-left: 14px !important;
      }
      .cell{
        line-height: 36px !important;
        font-size: 14px;
        color: #333;
      }
    }
    .el-table__row{
      height: 40px !important;
    }
    td{
      padding: 0 !important;
      height: 40px;
      &:first-child .cell{
        padding-left: 14px !important;
      }
      .cell{
        font-size:14px;
        color: #666;
      }
    }
    .state{
      font-size: 14px;
    }
  }
}
</style>
